<template>
	<div class="head">
		<nav class="clearfix">
			<!-- logo -->
			<div class="shs_logo clearfix">
				<img src="/api/ico/logo.ico" alt="logo" />
				<span class="shs_title">社会数</span>
			</div>

			<router-link to="/">首页</router-link>
			<router-link to="/blogrollView">友情链接</router-link>
			<router-link to="/managelogin">管理后台</router-link>

			<template v-if="login_logo">
				<router-link to="/login">用户登录</router-link>
			</template>
			<template v-else>
				<el-dropdown @command="userinfo_command" trigger="hover">
					<el-link href="javascript:;" :underline="false" :title="userName">
						{{ userName }}<i class="el-icon-user-solid"></i>
					</el-link>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="exit">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</template>
		</nav>
	</div>
</template>

<script>
	export default {
		name: 'navigationTar',
		data() {
			return {
				login_logo: true, // 登录标识
				userName: null // 用户名
			}
		},
		methods: {
			userinfo_command(v) {
				if (v === 'exit') {
					this.$confirm('确定要退出吗？').then(() => {
						localStorage.removeItem('guest')
						this.login_logo = true
						this.userName = null
					})
				}
			}
		},
		mounted() {
			this.userName = JSON.parse(localStorage.getItem('guest'))?.userName || null
			this.login_logo = !this.userName
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		height: 50px;
		position: fixed;
		z-index: 6;
	}

	.head::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: -1;
		backdrop-filter: blur(2px);
		border-bottom: 1px solid #b5add4;
	}

	nav {
		width: 86%;
		min-width: 1000px;
		margin: 0 auto;
		line-height: 50px;
		text-align: right;
	}

	nav a {
		font-weight: bold;
		color: #2c3e50;
		width: 100px;
		text-align: center;
		display: inline-block;
		margin-left: 5%;
		text-decoration: none;
	}

	nav a.router-link-exact-active {
		color: #00a1a1;
	}

	.shs_logo {
		float: left;
	}

	.clearfix::after {
		content: '';
		display: block;
		clear: both;
	}

	.shs_logo img {
		width: 50px;
		height: 50px;
		float: left;
	}

	.shs_logo .shs_title {
		margin-left: 10px;
		font-family: '楷体';
		font-size: 24px;
	}
</style>